<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo">

        <el-form-item label="应用">
          <el-select clearable filterable placeholder="请选择" @keyup.enter.native="handleQuery" v-model="searchInfo.apps_name">
            <el-option
                    v-for="(item, i) in appOptions"
                    :key=i
                    :label=item
                    :value=item>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境" prop="env">
          <el-select  placeholder="环境" clearable v-model="searchInfo.deploy_env" style="width: 120px">
            <el-option
                    v-for="(item, i) in envOptions"
                    :key="i"
                    :label="item.item_name"
                    :value="item.item_value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部署状态">
          <el-select clearable placeholder="请选择" v-model="searchInfo.deploy_status" style="width: 120px">
            <el-option label="运行中" value="1"></el-option>
            <el-option label="成功" value="2"></el-option>
            <el-option label="失败" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
                  class="filter-item"
                  type="primary"
                  icon="el-icon-search"
                  @click="handleQuery"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
            :data="tableData"
            row-key="ID"
            style="width: 100%;">
<!--      <el-table-column prop="build_number" label="buildID" width="70"/>-->
      <el-table-column prop="apps_name" label="应用名" width="150" :show-overflow-tooltip="true" />
      <el-table-column prop="deploy_nick_name" label="发布用户" width="80" :show-overflow-tooltip="true" />
      <el-table-column prop="deploy_env" label="环境"  width="50" >
        <template slot-scope="scope">{{scope.row.deploy_env }}</template>
      </el-table-column>

      <el-table-column prop="branch_name" label="分支" width="60" :show-overflow-tooltip="true" />
      <el-table-column prop="deploy_type" label="发布类型" width="80">
        <template slot-scope="scope">
          {{ scope.row.deploy_type|formatDeployType}}
        </template>
      </el-table-column>
      <el-table-column label="包版本"  width="160" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <el-link :href="formatPackageAddr(row)" type="primary" :underline="false" title="">{{row.version}}</el-link>
        </template>
      </el-table-column>
<!--      <el-table-column prop="deploy_status" label="构建状态" width="80"/>-->
      <el-table-column prop="deploy_status" label="构建状态" width="80">
        <template slot-scope="scope">
            <span v-if="scope.row.deploy_status==3" style="color: red">{{scope.row.deploy_status | basecode(scope.row.deploy_status,'build_status')}}</span>
            <span v-if="scope.row.deploy_status==2" style="color: green">{{scope.row.deploy_status | basecode(scope.row.deploy_status,'build_status')}}</span>
            <span v-if="scope.row.deploy_status==1" style="color: blue">{{scope.row.deploy_status | basecode(scope.row.deploy_status,'build_status')}}</span>
            <span v-if="scope.row.deploy_status==4" style="color: orchid">{{scope.row.deploy_status | basecode(scope.row.deploy_status,'build_status')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deploy_apply_configure.project_code" label="属性项目" width="100" :show-overflow-tooltip="true"/>
      <el-table-column label="创建日期" align="center" prop="createdAt" >
        <template slot-scope="scope">
          <span>{{ scope.row.CreatedAt|formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="90">
        <template slot-scope="scope">
          <el-button
                  @click="handleClickSearchLog(scope.row.build_number, scope.row.apps_job_name, scope.row.deploy_type)"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
          >日志</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :style="{float:'right',padding:'20px'}"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>


    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="80%" style="background-color: black" >
      <pre>
        {{buildLogContent}}
      </pre>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDeployBuildList } from "@/api/deploy_build";
  import { getJenkinsBuildJobLogs } from "@/api/deploy_jenkins";
  import { getDeployAppList } from "@/api/deploy_app";
  import infoList from '@/mixins/infoList'
  import { formatTimeToStr } from '@/utils/date'

  export default {
    name: "historyList",
    mixins: [infoList],
    data() {
      return {
        listApi: getDeployBuildList,
        searchInfo: {
          apps_name: '',
          deploy_env: '',
          deploy_status:'',
        },
        appOptions: [],
        envOptions: [],
        buildLogContent: '',
        dialogTitle: '',
        dialogFormVisible: false
      }
    },
    computed: {
      formatPackageAddr() {
        // data是计算属性的参数
        return (data) => {
          // return this.FTP_PACKAGE_URL +"/"+ data.backup_path;
          return data.backup_host +"/"+ data.backup_path;
        }
      }
    },
    methods: {
      // 项目搜索
      handleQuery() {
        this.getTableData()
      },
      handleClickSearchLog(build_number, apps_job_name, deploy_type) {
        getJenkinsBuildJobLogs({build_number: build_number, apps_job_name: apps_job_name, deploy_type:deploy_type}).then(res => {
          if (res.code == 0 ) {
            this.buildLogContent = res.data.log
            console.log(this.buildLogContent)
            this.dialogTitle = apps_job_name + " 的构建日志:"
            this.dialogFormVisible = true

          }
        })
      }

    },
    filters: {
      formatDate: function(time) {
        if (time != null && time != '') {
          let date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      },
      formatDeployType: function(t) {
        if (t != null && t == 'normal') {
          return '发布'
        } else if (t == 'restart'){
          return '重启'
        } else if (t == 'rollback'){
          return '回滚'
        } else {
          return '未知'
        }
      },
      formatString: function(bool) {
        if (bool != null) {
          return bool ? "正常" :"关闭";
        } else {
          return "";
        }
      },
      formatBoolean: function(s) {
        if (s == "1" ) {
          return true
        } else {
          return false;
        }
      },

    },
    async created() {
      this.searchInfo.apps_name = this.$route.query.apps_name
      this.searchInfo.deploy_env = this.$route.query.deploy_env
      await this.getTableData();
      getDeployAppList({'page':1, 'pageSize':500}).then(res => {
        if (res.code == 0 ) {
          this.appOptions = res.data.list.map(x => {return x.apps_name})
        } else {
          this.$message({
            type: 'error',
            message: '网络请求失败',
          })
        }

      })
      this.envOptions = this.getDicItemList('env_name')


    }
  }
</script>

<style scoped>
  /*默认情况下，<pre /> 标签中的内容若超出范围不会自动换行*/
  pre {
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
  }
</style>